<template>
    <div id="container">
      <div class="ivu-card p-3">
        <div class="search_title d-flex align-items-center">人员分组</div>
        <div class="serach_case"></div>
      </div>
  
      <Row :gutter="10" class="m-3 h-100">
        <Col :span="6">
          <div class="ivu-card flex-grow-1 p-4 h-100">
            <Menu theme="light" @on-select="selectMenu" :active-name="groupId">
              <MenuGroup title="权限组">
                <MenuItem
                  v-for="(item, index) in datalist"
                  :key="index"
                  :name="item.id"
                >
                  <Icon type="md-construct" />
                  {{ item.title }}
                </MenuItem>
              </MenuGroup>
            </Menu>
          </div>
        </Col>
        <Col :span="18">
          <div class="ivu-card flex-grow-1 p-4 h-100">
            <div
              class="tools d-flex align-items-center"
              style="
                width: 70%;
                display: flex;
                padding: 0px 2.5rem;
                margin-bottom: 2.5rem;
              "
            >
              <Input
                icon="ios-search"
                placeholder="请输入姓名查询"
                v-model="searchItem.searchKey"
                @on-search="getUser((page = 1))"
                search
                enter-button="搜索"
              />
              <Button class="addBtn ml-2" type="primary"
                >+&nbsp;&nbsp;添加人员</Button
              >
             
              <Button class="addBtn" type="error" @click="removeAction"
                >-&nbsp;&nbsp;移除人员</Button
              >
            </div>
  
            <div style="padding: 0px 2.5rem">
              <Table :columns="columns" :data="list" :loading="loading"  @on-selection-change="selectDevices">
                <template slot-scope="{ row, index }" slot="action">
                  <span class="btn" @click="edit(index)">编辑</span>
                  <span class="btn" @click="deleteInfo(index)">删除</span>
                </template>
              </Table>
              <div class="text-right mt-4">
                <Page
                  :total="total"
                  :page-size-opts="[10, 20, 40, 50, 100]"
                  show-sizer
                  :current="page"
                  :page-size="pageSize"
                  @on-page-size-change="pageSizeChange"
                  @on-change="pageChange"
                ></Page>
              </div>
            </div>
          </div>
        </Col>
      </Row>
  
      <Drawer
        title="设备信息"
        v-model="showDevice"
        width="520"
        :mask-closable="false"
        :styles="styles"
      >
        <Form label-position="top">
          <Table :columns="columns" :data="noList" @on-selection-change="selectDevices">
            <template slot-scope="{ row }" slot="status">
              <Badge v-show="row.status == 1" color="green" text="正常" />
              <Badge v-show="row.status != 1" color="red" text="禁用" />
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <span class="btn" @click="addDevice(index)">添加</span>
            </template>
          </Table>
        </Form>
        <div class="demo-drawer-footer">
          <Button style="margin-right: 8px" @click="showDevice = false"
            >取消</Button
          >
          <Button type="primary" @click="saveInfo">批量添加</Button>
        </div>
      </Drawer>
    </div>
  </template>
  
  <script>
  import index from "./index.js";
  export default index;
  </script>
  
  <style lang="less" scoped>
  @import "./index.less";
  </style>
  <style lang="less" scoped>
  #container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: transparent !important;
  
    .search_title {
      font-size: 16px;
      font-weight: 600;
      color: #515a6e;
      text-align: left;
      background-color: #fff;
      margin-bottom: 1rem;
      // .largeIcon {
      //   color: #9a70f3;
      //   background-color: #d4c2f9;
      // }
    }
  
    .serach_case {
      .ivu-form-item {
        margin-bottom: 10px;
      }
    }
  
    .tools {
      margin-bottom: 25px;
  
      .ivu-btn {
        margin: 0 10px 0 0;
      }
    }
  }
  </style>
  